/*
 *@description:注册页面
 *@LastEditors:@reynold
 *@Author:@reynold
 *@Date:2025-03-25 09:03:58
 *@Update:2025-03-25 09:03:58
 *@Version: V1.0.0
*/
<template>
  <div class="login_box">
    <div class="login_form">
      <!-- 系统名称 -->
      <div class="login_title">用户注册</div>
      <div class="login_form_box">
        <!-- 用户名 密码 登录 / 注册页面 -->
        <van-form ref="vanForm" @submit="onSubmit">
          <van-field v-model="userForm.username" label="用户名" placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]" />
          <van-field v-model="userForm.password" type="password" label="密码" placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]" />
          <van-field v-model="userForm.password1" type="password" label="密码" placeholder="再次输入密码"
            :rules="[{ required: true, message: '请填写密码' }]" />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">注册</van-button>
          </div>
        </van-form>
        <div @click="toLogin" class="regiter_box">已有账号，去登陆</div>
      </div>
    </div>
  </div>
</template>
<script>
import { register } from '@/api/user.js'
export default {
  data() {
    return {
      userForm: {
        username: '',
        password: '',
        password1: ''
      }
    }
  },
  methods: {
    // 重置表单
    resetValidation() {
      console.log(this.$refs.vanForm);
      this.$refs.vanForm.resetValidation();
    },
    onSubmit() {
      console.log('userForm', this.userForm);
      // if(this.userForm.password===this.userForm.password1){
      //   // 发送请求注册
      //   console.log(this.userForm);
      //   // 注册成功之后 清空表单 跳转回登录页面 给一个提示 注册成功
      //   this.resetValidation()
      //   this.$notify({
      //     type: 'success',
      //     message: '注册成功'
      //   })
      //   this.$router.push('/login')
      // }else{
      //   this.$notify({
      //     type: 'warning',
      //     message: '两次输入密码不一致'
      //   })
      // }
      if (this.userForm.password === this.userForm.password1) {
        register(this.userForm).then(res => {
          this.resetValidation()
          this.$notify({
            type: 'success',
            message: res.data?.message ? res.data.message : '注册成功'
          });
          this.$router.push('/login')
          console.log(res);
        }).catch(err => {
          console.log(err);
          this.$notify({
            type: 'warning',
            message: err?.response?.data?.message ? err.response.data.message : '注册失败'
          });
        })
      }else{
        this.$notify({
          type: 'warning',
          message: '两次输入密码不一致'
        })
      }
    },
    toLogin() {
      this.$router.push('/login')
    }
  }
}
</script>
<style scoped>
.login_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/bg.jpg');
  background-size: cover;
  background-position: center;
}

.login_form {
  width: 80%;
  height: 45%;
  background-color: rgba(248, 166, 163, 0.5);
  border-radius: 10px;
}

.login_title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
}

.login_form_box .van-cell {
  color: #fff;
  margin-top: 20px;
  background-color: inherit;
}

.regiter_box {
  width: 100%;
  text-align: center;
  color: rgb(6, 215, 41);
}
</style>